<template>
  <div id="app">
    <!-- 头部 -->
    <Header :userInfo=userInfo></Header>
    <!-- 侧边导航栏 -->
    <SideNavBar></SideNavBar>
    <Loading></Loading>
    <router-view :key="$route.fullPath" />

    <!-- 登录模态框 -->
    <Login></Login>
    <SearchModle></SearchModle>
    <!-- 侧边栏 -->
    <Sidebar></Sidebar>
  </div>
</template>

<script>
import Header from '@/components/layout/Header.vue'
import SideNavBar from "@/components/layout/SideNavBar.vue";
import Sidebar from '@/components/layout/Sidebar.vue'
import Loading from '@/components/loading/loading.vue'
import Login from '@/components/model/Login.vue'

export default {
  name: 'App',
  components: {
    Header,
    Sidebar,
    Login,
    SideNavBar,
    Loading,
  },
  data() {
    return {
      userInfo: this.$store.state.userInfo,
    }
  },
  created() {
      document.addEventListener('keydown', (event) => {
          if (event.ctrlKey && event.key === 'k') {
              this.$store.state.searchDialogVisible = true
              event.preventDefault(); // 阻止默认行为
          }
      });
  },

  methods: {
  },

  mounted() {
    let theme = sessionStorage.getItem("theme")
    if (theme == null) {
      theme = "light"
    }
    document.documentElement.dataset.theme = theme
  },

}
</script>

<style lang="scss" scoped>
#app {
  background: var(--body-color);
}
</style>
